<template>
    <div class="app">
        <h2>{{ message }}</h2>
        <button @click="clickbutton">你想对小染说什么呢</button>
        <hr>
        <home :name="refname" :age="refage" @emitsname="appchangename" ref="homeref"></home>
        <hr>
        <home></home>
    </div>
</template>
<script setup>
import home from './home.vue'
import { ref, onMounted } from "vue"
// 定义响应式数据
const message = ref("亦小染在学习Vue")
function clickbutton() {
    message.value = "记得坚持，唯有坚持"
}
// 父子通信
const refname = ref("亦小染")
const refage = ref(19)
function appchangename(payload) {
    refname.value = payload
    console.log("监听到", payload)
}
// 获取组件实例
const homeref = ref()
onMounted(() => {
    homeref.value.foo()
})
</script>
<style scoped lang="less"></style>